<template>
	<view class="bg">
		<view class="code">
			<view class="card">
				<view @tap.stop="onShowGroupFullImage" v-if="typeValue=='group'">
					<head-image class="avatar" :name="groupData.title" :url="groupData.headImage"
						:size="125"></head-image>
				</view>
				<view @tap.stop="onShowFullImage" v-else>
					<image :src="userInfo.headImage" v-if="userInfo.headImage" class="avatar"></image>
					<head-image :name="userInfo.nickName" :size="110" class="avatar" v-else></head-image>
				</view>
				<view class="content" v-if="valueList.length == 0">
					<view class="content-list" v-if="typeValue=='group'">
						<view class="username">
							<view v-if="groupData.groupType == 2" style="margin-right: 25rpx;">
								<badge type="business-group" :title="badge"></badge>
							</view>
							<text class="text-md-Medium gtitle">{{ groupData.title }}</text><text
								style="white-space: nowrap;">（{{ groupNum }}人）</text>
						</view>
						<view class="number">
							<view class="fc" @tap="copyText(groupData.groupNumber)">
								<view>
									<text class="text-sm-Regular">群号：</text><text class="text-sm-Regular">{{
										groupData.groupNumber }}</text>
								</view>
								<svg-icon icon="clone" :width="32"></svg-icon>
							</view>
						</view>
					</view>
					<view class="content-list" v-else>
						<view class="username">
							<text class="text-lg-Medium">{{ userInfo.nickName }}</text>
							<svg-icon icon="sex" :width="32" v-if="userInfo.sex==0"></svg-icon>
							<svg-icon icon="woman" :width="32" v-if="userInfo.sex==1"></svg-icon>
						</view>
						<view class="number">
							<view class="fc" @tap="copyText(userInfo.userFriendId)">
								<view>
									<text class="text-sm-Regular">好友号：</text><text class="text-sm-Medium">{{
										userInfo.userFriendId }}</text>
								</view>
								<svg-icon icon="clone" :width="32"></svg-icon>
							</view>
							<view class="fc" @tap="copyText(userInfo.userBusinessId)">
								<view>
									<text class="text-sm-Regular">友商号：</text><text class="text-sm-Medium">{{
										userInfo.userBusinessId }}</text>
								</view>
								<svg-icon icon="clone" :width="32"></svg-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="content" v-else>
					<view class="content-list">
						<view class="username">
							<text class="text-lg-Medium">{{ userInfo.nickName }}</text>
							<svg-icon icon="sex" :width="32"></svg-icon>
						</view>
						<view class="number" v-for="item in valueList">
							<view class="fc" @tap="copyText(item.value)">
								<view>
									<text class="text-sm-Regular">{{ item.key }}：</text>
									<text class="text-sm-Medium">{{ item.value }}</text>
								</view>
								<svg-icon icon="clone" :width="32"></svg-icon>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="frame">
				<view class="btnGroup" v-if="typeValue == 'default'">
					<button :class="activeType==1?'active':'btn'" @tap.stop.native="loadMyCode('friend')">好友号</button>
					<button :class="activeType==2?'active':'btn'" @tap.stop.native="loadMyCode('business')">友商号</button>
				</view>
				<image :src="myCode" alt="" class="code-img"></image>
				<!-- <svg-icon icon="code" :width="336" v-else></svg-icon> -->
				<text class="text-sm-Regular" v-if="typeValue=='default'">{{title}}</text>
				<text class="text-sm-Regular" v-else-if="typeValue=='group'">扫一扫二维码，加入群聊</text>
				<text class="text-sm-Regular" v-else-if="typeValue=='share'">扫描二维码邀请成为你的下级</text>
			</view>
			<!-- #ifndef H5 -->
			<view class="share">
				<button class="share-item" @tap="saveImage">
					<view style="line-height: 60rpx;">
						<svg-icon icon="download" :width="48"></svg-icon>
					</view>
					<text class="text-sm-Medium">保存图片</text>
				</button>
				<!-- #ifdef MP-WEIXIN -->
				<button class="share-item" open-type="share">
					<view style="line-height: 60rpx;">
						<svg-icon icon="share" :width="48"></svg-icon>
					</view>
					<text class="text-sm-Medium">分享</text>
				</button>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<button class="share-item" @tap="shareImage">
					<view style="line-height: 60rpx;">
						<svg-icon icon="share" :width="48"></svg-icon>
					</view>
					<text class="text-sm-Medium">分享</text>
				</button>
				<!-- #endif -->
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="share">
				<button class="share-item" @tap="saveImage">
					<view style="line-height: 60rpx;">
						<svg-icon icon="download" :width="48"></svg-icon>
					</view>
					<text class="text-sm-Medium">保存图片</text>
				</button>
				<button class="share-item" @tap="shareClick">
					<view style="line-height: 60rpx;">
						<svg-icon icon="share" :width="48"></svg-icon>
					</view>
					<text class="text-sm-Medium">分享</text>
				</button>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import {
		genShareQrcode,
		getShareData
	} from '@/utils/qrcode';

	export default {
		name: "code-popup",
		props: {
			show: {
				type: Boolean,
				default: false
			},
			/**
			 * 0||default,1||group,2||share
			 */
			type: {
				type: [Number, String],
				default: "default"
			},
			qrUrl: {
				type: String,
				default: null
			},
			values: {
				type: [Array, Object],
				default: []
			},
			shareData: {
				type: Object,
				default: null
			},
			groupNum: {
				type: Number,
				default: null
			},
			groupData: {
				type: Object
			}
		},
		data() {
			return {
				badge: "",
				myCode: null,
				share: this.shareData,
				activeType:1 ,//判断当前为友号还是商号
				title:"扫一扫二维码，加我为好友"//显示好友商友
			};
		},
		computed: {
			typeValue() {
				const map1 = {
					0: 'default',
					1: 'group',
					2: 'share'
				}
				const map2 = {
					default: 0,
					group: 1,
					share: 2
				}
				const value1 = map1[this.type]
				const value2 = map2[this.type]
				return value1 || map1[value2]
			},
			userInfo() {
				return this.userStore.userInfo;
			},
			valueList() {
				if (!Array.isArray(this.values)) {
					return Object.keys(this.values).map(key => ({
						key: key,
						value: this.values[key]
					}));
				}
				return this.values
			}
		},
		methods: {
			saveImage() {
				this.$emit("saveImage")
			},
			shareImage(){
				uni.shareWithSystem({
					imageUrl: this.shareImgUrl,
				})
			},
			shareClick() {
				this.copyText(this.qrUrl, () => {
					uni.showToast({
						icon: 'success',
						title: '已将分享链接复制到剪贴板，您可以将剪贴板内容复制给好友，在浏览器中点击链接加入',
						duration: 4000
					})
				})
			},
			//查看个人头像
			onShowFullImage() {
				let imageUrl = this.userInfo.headImage;
				if (imageUrl) {
					uni.previewImage({
						urls: [imageUrl]
					})
				}
			},
			//查看群聊头像
			onShowGroupFullImage() {
				let imageUrl = this.groupData.headImage;
				if (imageUrl) {
					uni.previewImage({
						urls: [imageUrl]
					})
				}
			},
			loadGroupCode(id) {
				genShareQrcode(getShareData().groupData(id)).then((code) => {
					this.myCode = code
				});
			},
			loadMyCode(type) {
				if (type == "friend") {
					genShareQrcode(getShareData().friendData(this.userInfo.id)).then((code) => {
						this.shareData.path =
							`/pageSubOne/common/user-info?id=${this.userInfo.id}&chatIdx=null&sourceType=0&friendType=0&fromThis=false&from=true`;
						this.myCode = code
						this.activeType=1
						this.title="扫一扫二维码，加我为好友"
					});
				} else if (type == "business") {
					genShareQrcode(getShareData().bussinessFriendData(this.userInfo.id)).then((code) => {
						this.shareData.path =
							`/pageSubOne/common/user-info?id=${this.userInfo.id}&chatIdx=null&sourceType=1&friendType=1&fromThis=false&from=true`;
						this.myCode = code
						this.activeType=2
						this.title="扫一扫二维码，加我为友商"
					});
				}
			},
			close() {
				this.$emit("close", false)
			},
			loadCode() {
				console.log(this.valueList);
				if (this.typeValue == 'default') {
					this.loadMyCode("friend")
				} else if (this.typeValue == 'group') {
					this.loadGroupCode(this.groupData.id)
				} else if (this.typeValue == 'share') {
					console.log(this.valueList[0].value);
					genShareQrcode(getShareData().shareCodeData(this.valueList[0].value)).then((code) => {
						this.myCode = code
					});
				}
			}
		},
		mounted() {
			/* if (!this.typeValue != 'group') {
				this.loadMyCode("friend")
			} */
			this.loadCode()
		},
		watch: {
			qrUrl() {
				this.loadCode()
			},
			myCode(value) {
				this.$emit("qrcodeUrl", value)
			},
			groupData: {
				immediate: true, // 立即执行一次
				handler(newVal) {
					if (newVal && newVal.id) {
						this.loadGroupCode(newVal.id);
						let firstFour = newVal.title.slice(0, 4);
						const lastTwo = firstFour.slice(-2); // 获取前4个字符的最后2个字符
						if (firstFour.length === 4 && ["官", "民", "社", "在"].includes(firstFour.slice(-1))) {
							// 如果最后一个字是“官”，则删除它
							firstFour = firstFour.slice(0, 3);
						}
						if(lastTwo==="村村"){
							firstFour = firstFour.slice(0, 3);
						}
						this.badge = firstFour;
					}
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.bg {
		background-repeat: no-repeat;
		background-image: url('https://file.dgyxy.com/resource/bgDefault.png');
		background-size: 100% 100%;
		border-radius: 8px;

		.code {
			padding: 16px;
			position: relative;


			.card {
				background-color: $white;
				border-radius: 8px;
				padding: 16px;
				position: relative;
				border: 1px solid rgba(209, 224, 255, 0.4);
				margin-top: 32px;

				.avatar {
					width: 72px;
					height: 72px;
					position: absolute;
					top: -30px;
					border-radius: 50%;
				}

				.content {
					width: 550rpx; //添加宽度
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-top: 36px;
					gap: 12px;

					.content-list {

						.username {
							display: flex;
							align-items: center;
							gap: 4px;

							.gtitle {
								// width: 220rpx;
								display: inline-block;
								text-overflow: ellipsis;
								overflow: hidden;
								white-space: nowrap;
							}
						}

						.number {
							display: flex;
							justify-content: flex-start;
							gap: 16px;
							align-items: center;

							.fc {
								display: flex;
								align-items: center;
								gap: 8px;
							}

							text:first-child {
								color: $gray-400;
							}

							text:last-child {
								color: $gray-600;
							}
						}

						.invite-code {
							padding: 8px 12px;

							.haveCode {
								display: flex;
								justify-content: space-between;
								align-items: center;
							}

							text:first-child {
								color: $gray-400;
							}

							.clone {
								display: flex;
								align-items: center;
								gap: 4px;

								text {
									color: $brand-500;
								}
							}
						}
					}
				}
			}

			.frame {
				width: 100%;
				background-color: $white;
				border-radius: 8px;
				padding: 60rpx 0;
				position: relative;
				border: 1px solid rgba(209, 224, 255, 0.4);
				text-align: center;
				display: flex;
				flex-direction: column;
				gap: 10px;
				align-items: center;

				.btnGroup {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.btn {
						background-color: $white;
						color: $brand-500;
						border: 1rpx solid $brand-500;
						width: 150rpx;
						line-height: 50rpx;
						font-size: 25rpx;
						border-radius: 30rpx;
					}
					
					.active{
						background-color: $brand-500;
						color: $white;
						width: 150rpx;
						line-height: 50rpx;
						font-size: 25rpx;
						border-radius: 30rpx;
					}
				}

				.code-img {
					width: 336rpx;
					height: 336rpx;
				}

				text {
					color: $gray-600;
				}
			}

			.share {
				display: flex;
				justify-content: center;
				align-items: center;

				.share-item {
					display: flex;
					align-items: center;
					flex-direction: column;
					padding: 8px 25px;
					width: 50%;
					background-color: transparent;
					border: none;

					&::after {
						display: none;
					}

					.share-img {
						width: 65rpx;
						height: 65rpx;
					}

					text {
						color: $gray-900;
					}
				}

			}
		}
	}
</style>